<!--
 * @Author: 唐锋
 * @Date: 2019-06-14 16:55:18
 * @Description: 主页面左侧导航栏
 -->
 <template>
  <div class="my-aside">
    <el-menu unique-opened
      :default-openeds="open"
      :default-active="initActive">
      <el-submenu v-for="item in menuList"
        :key="item.id"
        :index="item.index">
        <template slot="title">
          <i :class="item.icon"></i>{{item.menuTitle}}</template>
        <el-menu-item v-if="item.children"
          v-for="i in item.children"
          :key="i.id"
          :index="i.index">
          <router-link :to="i.url">
            <div @click="changeRoute(i.index)">{{i.menuTitle}}</div>
          </router-link>
        </el-menu-item>
      </el-submenu>
    </el-menu>
  </div>
</template>
 
 <script>
import menuList from "@/assets/aside.json";
export default {
  components: {},
  props: {},
  data() {
    return {
      menuList,
      initActive: "1.1",
      open: ["1"]
    };
  },
  watch: {},
  computed: {},
  methods: {
    changeRoute(initActive) {
      sessionStorage.setItem("initActive", initActive);
    }
  },
  created() {
    this.initActive = sessionStorage.getItem("initActive");
  },
  mounted() {}
};
</script>
 <style lang="scss" scoped>
.my-aside {
  background: #fff;
  height: calc(100vh - 84px);
  overflow: auto;
  .el-submenu {
    &.is-opened {
      background: #ecf5ff;
    }
    .el-menu-item {
      font-size: 12px;
      &.is-active {
        background: #6d2377;
        & > a {
          color: #fff;
        }
      }
    }
  }
}
</style>
